<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <knowledge-memu
          style="margin-top: 20px"
          :memulist="memulist"
          @handleCheckChange="handleCheckChange"
        >
        </knowledge-memu>
      </el-aside>
      <el-main>
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span style="font-size: large"
              ><strong>东杰智能员工知识库编辑器</strong></span
            >
            <el-button
              style="margin-left:10px"
              icon="el-icon-plus"       
              @click="addcontent()"
              size="mini"
              >新增</el-button
            >
          </div>

          <el-row :gutter="12">
            <el-col :span="16"
              ><el-input v-model="title" placeholder="请输入教程标题"></el-input
            ></el-col>
            <el-col :span="4">
              <el-select
                v-model="type"
                placeholder="请选择教程类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in selecttype"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="postcontent()" v-if="isadd"
                >提交</el-button
              >
              <el-button type="success" @click="updatecontent()" v-if="!isadd"
                >更新</el-button
              >
            </el-col>
          </el-row>
          <tinymce
            ref="editor"
            style="height: auto; border-radius: 22px; margin-top: 10px"
          ></tinymce>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import tinymce from "../common/editor";
import KnowledgeMemu from "./KnowledgeMemu.vue";
import arrayToTree from "array-to-tree";

export default {
  components: { KnowledgeMemu, tinymce },


  created() {
    this.getMemu();
    this.gettype();
  },

  data() {
    return {
      title: "",
      type: "",
      memulist: [],
      isadd: true,
      contentid: "",
      memuid: "",
      selecttype: [],
    };
  },

  methods: {
    addcontent() {
      this.$refs.editor.contentValue = "";
      this.title = "";
      this.isadd = true;
      this.type = "";
    },

    async gettype() {
      try {
        let res = await this.$axios.get(`api/knowledge/gettype`);
        this.selecttype = res.data;
      } catch (e) {}
    },

    async getMemu() {
      try {
        let res = await this.$axios.get(`api/knowledge/getmemu`);
        this.memulist = arrayToTree(res.data, {
          parentProperty: "pid",
          customID: "id",
        });
      } catch (e) {}
    },

    handleCheckChange(data) {
      if (!data.hasOwnProperty("children")) {
        this.isadd = false;
        this.getcontent(data);
        this.contentid = data.kid;
        this.memuid = data.id;
      }
    },

    async getcontent(data) {
      let datas = { kid: data.kid };
      this.$axios
        .post("api/knowledge/getcontent", datas)
        .then((response) => {
          this.title = response.data.title;
          this.type = response.data.type;
          this.$refs.editor.contentValue = response.data.content;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    postcontent() {
      let datas = {
        content: this.$refs.editor.contentValue,
        pid: this.type,
        title: this.title,
      };
      this.$axios
        .post("api/knowledge/postcontent", datas)
        .then((response) => {
          this.$notify({
            title: "员工知识库",
            message: response.data,
            type: "success",
            duration: 1500,
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    updatecontent() {
      let datas = {
        content: this.$refs.editor.contentValue,
        pid: this.type,
        title: this.title,
        id: this.contentid,
        mid: this.memuid,
      };
      this.$axios
        .post("api/knowledge/updatecontent", datas)
        .then((response) => {
          this.$notify({
            title: "员工知识库",
            message: response.data,
            type: "success",
            duration: 1500,
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style >
</style>
